<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		body{
			margin: 0;
		}
		.fu{
			background-color: yellow;
			/**
			首尾元素的上或者下外间距会超出父元素的范围造成父子粘连问题:
			需要为父元素设置BFC也就是结界,此时子元素无论上下外间距都不会造成父子粘连问题
			 */
			overflow: hidden;
		}
		.fu>div{
            width: 100px;
            height: 100px;
			background-color: rgba(0,0,255,0.6);
            border: 2px solid #00f;
            color: #fff;
			font-size: 25px;
            font-weight: bold;
		}
		.z1{
			margin-bottom: 30px;
			margin-top: 100px;
		}
		.z2{
            margin-top: 50px;
		}
		.z4{
			margin-bottom: 100px;
		}
		.z3{
			margin: 10px;
			margin: 10px 20px;
			margin: 10px 20px 30px;
			margin: 10px 20px 30px 40px;
			margin: 0 auto;
		}
		.s2{
			margin: 100px;
		}
	</style>
</head>
<body>
<div class="fu">
	<div class="z1">子元素1</div>
	<div class="z2">子元素2</div>
	<div class="z3">子元素3</div>
	<div class="z4">子元素4</div>
</div>

<span>span1</span><span class="s2">span2</span><span>span3</span>
</body>
</html>